<template>
    <div class="home">
      <Navbar />
      <div class="content">
        <h1 class="search-title">搜索结果</h1>
        <div v-if="status === 200">
          <ul class="search-results">
            <li v-for="(item, index) in searchResults" :key="index">
              <router-link
                :to="{ name: 'FishDetails', params: { id: item.id } }"
                class="search-result-item"
              >
                <img
                  class="item-image"
                  :src="item.image"
                  :alt="item.name"
                />
                <div class="item-info">
                  <span class="item-name">{{ item.name }}</span>
                  <span class="item-user">{{ item.user }}</span>
                </div>
              </router-link>
            </li>
          </ul>
        </div>
        <div v-else-if="status === 404">
          {{ message }}
        </div>
      </div>
      <Footer />
    </div>
</template>
  
<script setup>
  import { ref, onMounted, watch } from 'vue';
  import { useRoute } from 'vue-router';
  // import axios from 'axios';
  import request from '../api/request'
  import Navbar from "../components/Navbar.vue";
  import Footer from "../components/Footer.vue";


  const route = useRoute();
  const searchQuery = ref('');
  const searchResults = ref([]);
  const status = ref(null);
  const message = ref('');
  
  const fetchData = async () => {
    try {
      const response = await request.post('search', { name: searchQuery.value });
      status.value = response.data.status;
  
      if (status.value === 200) {
        searchResults.value = response.data.data;
        // console.log(response.data.data);
      } else if (status.value === 404) {
        message.value = response.data.message;
      }
    } catch (error) {
      // Handle the error
    }
  };
  
  watch(
    () => route.query.q,
    (newValue) => {
      searchQuery.value = newValue;
      fetchData();
    }
  );
  
  onMounted(() => {
    searchQuery.value = route.query.q;
    fetchData();
  });
</script>
  
<style scoped>
  .home {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
  .home .content {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    padding: 50px 50px;
  }
  .search-title {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #333;
  }
  .search-results {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    list-style-type: none;
    padding: 0;
  }
  .search-result-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f0f0f0;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    width: 350px;
    height: 220px;
    text-decoration: none;
  }
  .search-result-item:hover {
    background-color: #f5f5f5;
  }
  .item-image-container {
    width: 100%;
    height: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .item-image {
    width: 100%;
    height: 150px;
    background-color: #e0e0e0;
    border-radius: 4px;
    margin-bottom: 8px;
    object-fit: cover;
    transition: background-color 0.3s;
  }
  .item-info{
    margin-top: 15px;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  width: 100%; /* 添加这一行来确保fish-info撑满父容器的宽度 */
  }
  .item-name {
    font-size: 1rem;
	  font-weight: bolder;
    color: black;
  }
  .item-user{
    color: black;
  }
</style>





  